<script setup>
import { nextTick, onMounted, ref, computed, onUnmounted } from "vue";
import SliderItem from "./SliderItem.vue";
const emit = defineEmits(["scroll"]);

const homeSteps = [
  {
    stepIndex: 0,
    name: "输入商品信息",
    url: "/svg/home-body2-icon1.svg",
    activeUrl: "/svg/home-body2-icon1-active.svg",
    path: "/images/home-body2-1.png",
    title: "更智能的洞察您的 营销需求",
    tags: ["灵活创建", "智能算法"],
    steps: [
      {
        tit: "快速上手创建",
        timestamp: "",
      },
      {
        tit: "提供多种优质方案",
        hollow: true,
        size: "large",
        timestamp:
          "平台智能推荐10+行业专属营销方案，支持商家一键应用成熟模板或输入产品信息生成个性化方案。",
      },
      {
        tit: "AI SALE 智能分析",
        timestamp: "",
      },
    ],
    boxColor: "#BACEFF",
    buttonColor: "#4172EA",
    buttons: [
      { text: "输入商品信息建立方案", buttonHoverColor: "" },
      { text: "抢先体验 →", buttonHoverColor: "" },
    ],
    gif: "/gifs/home-tab1.gif",
    backgroundSize: "149% 127%",
    backgroundPosition: "-155px -11px",
  },
  {
    stepIndex: 1,
    name: "生成营销方案",
    url: "/svg/home-body2-icon2.svg",
    activeUrl: "/svg/home-body2-icon2-active.svg",
    path: "/images/home-body2-2.png",
    title: "精准制定营销方案，高效提升收入",
    tags: ["灵活方案", "智能分析"],
    steps: [
      {
        tit: "提供您的商品链接",
        timestamp: "",
      },
      {
        tit: "智能分析商品信息，精准检索目标用户",
        hollow: true,
        size: "large",
        timestamp:
          "告别人工低效策划！ASALE智能引擎通过商品-用户双向分析，量身打造高ROI营销方案，实现流量精准转化。",
      },
      {
        tit: "多种方案多种选择",
        timestamp: "",
      },
    ],
    boxColor: "#FFD8BC",
    buttonColor: "#ED6C00",
    buttons: [{ text: "前往生成专属营销方案", buttonHoverColor: "" }],
    gif: "/gifs/home-tab2.gif",
    backgroundSize: "100% 100%",
    backgroundPosition: "center",
  },
  {
    stepIndex: 2,
    name: "自动获取客户",
    url: "/svg/home-body2-icon3.svg",
    activeUrl: "/svg/home-body2-icon3-active.svg",
    path: "/images/home-body2-3.png",
    title: "降低获客成本，自动获取客户",
    tags: ["降本增效", "快捷索客"],
    steps: [
      {
        tit: "10亿消费者减少推广成本",
        timestamp: "",
      },
      {
        tit: "9大电商社交平台合作自动获取优质客户",
        hollow: true,
        size: "large",
        timestamp:
          "打通9大电商平台及主流社交生态，全域智能对接目标客群，自动化挖掘高潜客户提升转化效率",
      },
      {
        tit: "提供潜在客户列表",
        timestamp: "",
      },
    ],
    boxColor: "#94E8C9",
    buttonColor: "#016844",
    buttons: [{ text: "免费获取100目标用户", buttonHoverColor: "" }],
    gif: "/gifs/home-tab3.gif",
    backgroundSize: "110% 100%",
    backgroundPosition: "center",
  },

  {
    stepIndex: 3,
    name: "与用户建立联系",
    url: "/svg/home-body2-icon4.svg",
    activeUrl: "/svg/home-body2-icon4-active.svg",
    path: "/images/home-body2-4.png",

    title: "个性化营销邮件，精准推送商品",
    tags: ["解放双手", "自动营销"],
    steps: [
      {
        tit: "添加邮箱账户",
        timestamp: "",
      },
      {
        tit: "智能生成个性化邮件或私信",
        hollow: true,
        size: "large",
        timestamp: "ASALE 实时同步并归类消费者信息，助力商家精准营销筛选。",
      },
      {
        tit: "开始建立联系",
        timestamp: "",
      },
    ],
    boxColor: "#D5B3F8",
    buttonColor: "#590168",
    buttons: [{ text: "体验AI生成营销邮件", buttonHoverColor: "" }],
    gif: "/gifs/home-tab4.gif",
    backgroundSize: "110% 100%",
    backgroundPosition: "center",
  },
];
const currentIndex = ref(0); // 当前显示的页面索引
const isAnimating = ref(false); // 是否正在动画中，防止重复触发
const stepWrapper = ref(null); // 外层容器的引用
const stepWrapperWidth = ref(0); // 动态计算的容器宽度
const translateX = ref(0); // 动态平移距离
const accumulatedDelta = ref(0); // 累加的滑动距离

// 计算列表的样式
const listStyle = computed(() => ({
  transform: `translateX(${translateX.value}px)`,
}));

// 页面滚动到指定索引
const scrollToPage = (index) => {
  const pageWidth = stepWrapperWidth.value;
  const targetTranslateX = -pageWidth * index;

  // 动画切换页面
  translateX.value = targetTranslateX;

  // 动画结束后重置状态
  setTimeout(() => {
    isAnimating.value = false;
  }, 500); // 根据动画时间调整
};

// 点击分页器切换页面
const goToPage = (index) => {
  if (isAnimating.value || index === currentIndex.value) return;

  isAnimating.value = true;
  currentIndex.value = index;
  scrollToPage(index);
};

// 滚轮事件处理
const handleWheel = (event) => {
  event.preventDefault(); // 阻止默认滚动行为
  if (isAnimating.value) return;
  if (!stepWrapper.value.contains(event.target)) return;

  const delta = event.deltaY; // 滚轮滚动方向
  const pageWidth = stepWrapperWidth.value;
  const maxIndex = homeSteps.length - 1;

  // 累加滑动距离
  accumulatedDelta.value += delta;

  // 根据累加的滑动距离实时更新 translateX
  translateX.value -= delta;

  // 判断是否超出边界
  if (translateX.value > 0) {
    translateX.value = 0; // 不允许超出第一页
    accumulatedDelta.value = 0; // 重置累加距离
    if (currentIndex.value != 0) {
      goToPage(0);
    } else {
      emit("scroll", "pre");
    }
    return;
  } else if (translateX.value < -pageWidth * maxIndex) {
    translateX.value = -pageWidth * maxIndex; // 不允许超出最后一页
    accumulatedDelta.value = 0; // 重置累加距离
    if (currentIndex.value != maxIndex) {
      goToPage(maxIndex);
    } else {
      emit("scroll", "next");
    }

    return;
  }

  // 判断是否需要翻页
  if (Math.abs(accumulatedDelta.value) >= 400) {
    //这里设置page width 就是滚动多少移动多少，设置具体数字 就是滚动到一定距离就翻页
    if (accumulatedDelta.value > 0) {
      // 向下滚动
      if (currentIndex.value < maxIndex) {
        goToPage(currentIndex.value + 1);
      } else {
        // 在最后一页，尝试向下滚动，触发自定义事件
        emit("scroll", "next");
      }
    } else {
      // 向上滚动
      if (currentIndex.value > 0) {
        goToPage(currentIndex.value - 1);
      } else {
        // 在第一页，尝试向上滚动，触发自定义事件
        emit("scroll", "pre");
      }
    }
    accumulatedDelta.value = 0; // 重置累加距离
  }
};

// 初始化滚动区域的宽度
const initSizes = () => {
  nextTick(() => {
    stepWrapperWidth.value = stepWrapper.value.offsetWidth;
  });
};

onMounted(() => {
  initSizes(); // 初始化宽度
  window.addEventListener("resize", initSizes); // 监听窗口大小变化更新尺寸
});

onUnmounted(() => {
  window.removeEventListener("resize", initSizes);
});
</script>
<template>
  <div class="sliders relative">
    <div class="sliders-tab">
      <div
        v-for="(item, index) in homeSteps"
        class="sliders-tab-item cursor-pointer"
        :class="{ active: currentIndex == item.stepIndex }"
        :style="{
          backgroundColor:
            currentIndex == item.stepIndex ? item.buttonColor : 'transparent',
        }"
        @click="goToPage(index)"
      >
        <img
          :src="currentIndex == item.stepIndex ? item.activeUrl : item.url"
          alt=""
        />
        {{ item.name }}
      </div>
    </div>
    <div class="sliders-wrapper" ref="stepWrapper" @wheel="handleWheel">
      <div class="sliders-list" v-if="stepWrapper" :style="listStyle">
        <SliderItem
          v-for="(item, index) in homeSteps"
          :item="item"
          :width="stepWrapper.offsetWidth"
          :height="stepWrapper.offsetHeight"
        ></SliderItem>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.sliders {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

  .sliders-tab {
    position: absolute;
    z-index: 4;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 852px;
    height: 56px;
    background: #ffffff;
    padding: 2px;
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.02);
    border-radius: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(9px);
    .sliders-tab-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      padding: 0 24px;
      img {
        width: 24px;
        height: 24px;
        margin-right: 12px;
      }
      &.active {
        border-radius: 26px;
        color: white;
      }
    }
  }
  .sliders-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .sliders-list {
      width: max-content;
      transition: transform 0.5s ease; /* 平滑过渡效果 */
      > div {
        float: left;
      }
    }
  }
}
</style>
